<template>
	<div class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">{{operationName}}课程</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal">
						
						<div class="form-group">
							<label class="col-sm-2 control-label">分类</label>
							<div class="col-sm-10" >
								<treeSelect ref="categoryTree" :treeData="categorys" :checkStrictly='false'></treeSelect>
							</div>
						</div>
						
						<div class="form-group">
							<label class="col-sm-2 control-label">课程名称</label>
							<div class="col-sm-10">
								<input class="form-control" v-model="course.name">
							</div>
						</div>
						
						<div class="form-group">
							<label class="col-sm-2 control-label">讲师</label>
							<div class="col-sm-10">
								<select v-model="course.teacherId" class="form-control">
									<option v-for="item in teachers" :value="item.id" :key="item.id">
										{{item.name}}
									</option>
								</select>
							</div>
						</div>
						
						<div class="form-group">
							<label class="col-sm-2 control-label">概述</label>
							<div class="col-sm-10">
								<input class="form-control" v-model="course.summary">
							</div>
						</div>					
						
						<div class="form-group">
							<label class="col-sm-2 control-label">价格(元)</label>
							<div class="col-sm-10">
								<input class="form-control" v-model="course.price">
							</div>
						</div>	
												
						<div class="form-group">
							<label class="col-sm-2 control-label">封面</label>
							<div class="col-sm-10">
								<file ref="file" text="上传封面" :afterUpload="afterUpload" :suffixs="suffixs" 
									:uploadUrl="uploadUrl" :purpose="$global.constant.FILE_PURPOSE.course" />
								<div v-if="course.image" class="row">
									<img :src="course.image" class="col-sm-6"/>
								</div>
							</div>
						</div>
						
						<div class="form-group">
							<label class="col-sm-2 control-label">级别</label>
							<div class="col-sm-10">
								<select v-model="course.level" class="form-control">
									<option v-for="item in $parent.COURSE_LEVEL" :value="item.key" :key="item.id">
										{{item.value}}
									</option>
								</select>
							</div>
						</div>
																								
						<div class="form-group">
							<label class="col-sm-2 control-label">是否收费</label>
							<div class="col-sm-10">
								<select v-model="course.charge" class="form-control">
									<option v-for="item in $parent.CHARGE" :value="item.key" :key="item.index">
										{{item.value}}
									</option>
								</select>
							</div>
						</div>
																										
						<div class="form-group">
							<label class="col-sm-2 control-label">状态</label>
							<div class="col-sm-10">
								<select v-model="course.status" class="form-control">
									<option v-for="item in $parent.COURSE_STATUS" :value="item.key" :key="item.index">
										{{item.value}}
									</option>
								</select>
							</div>
						</div>																										
												
						<div class="form-group">
							<label class="col-sm-2 control-label">报名数</label>
							<div class="col-sm-10">
								<input class="form-control" v-model="course.enroll">
							</div>
						</div>							
						
						<div class="form-group">
							<label class="col-sm-2 control-label">顺序</label>
							<div class="col-sm-10">
								<input class="form-control" v-model="course.sort">
							</div>
						</div>								
						
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" @click="save">{{operationName}}</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
</template>

<script>
import treeSelect from '@/views/components/select/treeSelect'
import file from '@/views/components/bigFile'
export default{
	data() {
		return {
			categorys: [],
			teachers: [],
			suffixs: ['jpg', 'jpeg', 'png'],
			uploadUrl: process.env.VUE_APP_SERVER + 'file/admin/file/upload/image/course',
		}
	},
	props: {
		course: Object,
		categoryIdList: Array
	},
	components: {
		treeSelect,
		file
	},
	computed: {
		operationName() {
			return this.course.id ? "修改" : "新增"
		}
	},
	mounted() {
		//获取所有的分类
		this.allCategory()
		//获取所有讲师
		this.allTeacher()
	},
	watch: {
		//选中已有的分类
		categoryIdList() {
			this.$refs.categoryTree.value = this.categoryIdList
		}
	},
	methods: {
		save() {
			let categoryIdList = this.$refs.categoryTree.value;
			if(!this.$global.validator.require(categoryIdList, '分类')) return
			this.course.categoryIdList = categoryIdList
			let url = process.env.VUE_APP_SERVER + 'business/admin/course/save'
			this.$axios.post(url, this.course)
				.then(res => {
					if(res.data.status === 1) {
						this.$toast(this.operationName + '课程成功', this.$global.toast.success)
						$('#save-modal').modal('hide')
						this.$parent.list(1)
					}else {
						this.$toast(res.data.msg, this.$global.toast.fail)
					}
				})
		},
		allCategory() {
			let url = process.env.VUE_APP_SERVER + 'business/admin/category/all'
			this.$axios.post(url)
				.then(res => {
					let data = res.data.data
					this.categorys = data
				})
		},
		allTeacher() {
			let url = process.env.VUE_APP_SERVER + 'business/admin/teacher/all'
			this.$axios.post(url)
				.then(res => {
					let data = res.data.data
					this.teachers = data
				})
		},
		afterUpload(resp) {
			this.course.image = resp.data.path
		}
	}
}	
</script>

<style>
</style>
